<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title></title>
    <link rel="stylesheet" href="css/reset.css"/>
    <link rel="stylesheet" href="css/animate.css"/>
    <link rel="stylesheet" href="css/delay.css"/>
    <link rel="stylesheet" href="css/style.css"/>
    <script src="js/zepto.min.v1.1.6.js"></script>
    <script src="js/hammer.v2.0.8.js"></script>
    <style>


    </style>
</head>
<body>
<div id="startBox"  style="display: block;">
    <div id="qianm" class="youxi">
        <div class="header">
            <div class="tuzi">
                <img class="animated pulse infinite" src="img/bb.png" alt=""/>
            </div>
        </div>
        <div class="biaoti2 animated bounceInDown">
            <img src="img/bg1.png" alt=""/>
            <div class="dzzz">颜色大作战</div>
        </div>

        <div class="kaishi2 animated fadeIn delay15">
            <img src="img/aa.png" alt=""/>
            <div id="ksks" class="kaishiz">开始游戏</div>
        </div>

    </div>
</div>
<div id="loginBox"  style="display: none;">
    <div class="bs-example" data-example-id="hoverable-table">
        <table class="table table-hover">
            <thead>
            <tr>
                <th>排名</th>
                <th>玩家</th>
                <th>分数</th>
                <th>时间</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <th scope="row">1</th>
                <td>Mark</td>
                <td>Otto</td>
                <td>@mdo</td>
            </tr>
            <tr>
                <th scope="row">2</th>
                <td>Jacob</td>
                <td>Thornton</td>
                <td>@fat</td>
            </tr>
            <tr>
                <th scope="row">3</th>
                <td>Larry</td>
                <td>the Bird</td>
                <td>@twitter</td>
            </tr>
            <tr>
                <th scope="row">2</th>
                <td>Jacob</td>
                <td>Thornton</td>
                <td>@fat</td>
            </tr>
            <tr>
                <th scope="row">2</th>
                <td>Jacob</td>
                <td>Thornton</td>
                <td>@fat</td>
            </tr>
            <tr>
                <th scope="row">2</th>
                <td>Jacob</td>
                <td>Thornton</td>
                <td>@fat</td>
            </tr>
            <tr>
                <th scope="row">2</th>
                <td>Jacob</td>
                <td>Thornton</td>
                <td>@fat</td>
            </tr>

            </tbody>
        </table>
    </div>
</div>
<div id="gameBox" >
    <canvas id="mycanvas"></canvas>
    <div class="gamebox" style="left: 0%;background-color: #97d1fa;"></div>
    <div class="gamebox" style="left: 33.3%;background-color: #9dfa9f;"></div>
    <div class="gamebox" style="left: 66.6%;background-color: #bc77fa;"></div>
    <div class="alertbox  animated bounceIn delay05">游戏结束</div>
    <div class="alertbox2 animated bounceIn delay05">恭喜通关</div>
    <div  class="usernum">分数：<span>0</span></div>
</div>







<script>

$(function(){
    //拉动的屏蔽
    $("body")[0].addEventListener("touchstart",function(){
        event.preventDefault();
    });

    var Mycnavas = $("#mycanvas"),
        GameBox = $(".gamebox");
    var h= document.getElementById("gameBox").clientHeight,
            w = document.getElementById("gameBox").clientWidth;

    var hammerGamebox1 = new Hammer(GameBox.eq(0)[0]),
        hammerGamebox2 = new Hammer(GameBox.eq(1)[0]),
        hammerGamebox3 = new Hammer(GameBox.eq(2)[0]);
     var   hammerkaishi = new Hammer($(".kaishi2")[0]);
     var  hammerlogin = new Hammer($("#loginBox")[0]);
    var hammerbiaoti2 = new Hammer($(".biaoti2")[0]);
    var hammeralertbox = new Hammer($(".alertbox")[0]);
    //计算后的颜色数组
    var MycolorAry=[];
    var gameNum = false;
    var setIn ;

    var usernum = 0 ;
    //颜色池
    var colorAry = ["rgb(250, 97, 149)","rgb(188, 119, 250)","rgb(158, 93, 46)","rgb(21, 66, 105)","rgb(251, 255, 53)","rgb(180, 250, 46)","rgb(39, 229, 180)","rgb(110, 119, 120)"];



    Mycnavas[0].width = w;
    Mycnavas[0].height = h;

    var ctx = Mycnavas[0].getContext("2d");



    hammerkaishi.on("tap",function(){
        $("#startBox").hide();
            $("#gameBox").show();
        gamestart(ctx);
    });

    hammerlogin.on("tap",function(){
        $("#loginBox").hide();
        $("#startBox").show();
    });

    hammerbiaoti2.on("tap",function(){
        $("#startBox").hide();
        $("#loginBox").show();
    });

    hammeralertbox.on("tap",function(){
//    `   alert(location.href);
        location.href = location.origin;
    })
    






    //----------- function -----------

    hammerGamebox1.on("tap",function(){

        var color1 = $(hammerGamebox1.element).css("backgroundColor");
        console.log(color1);
        console.log(MycolorAry[3]);
        if(color1==MycolorAry[3]){
            gameNum = true;
        }else{
            gameNum = false;
            console.log("选择错误,游戏结束！");
            clearInterval(setIn);
            $(".alertbox").show();

        }
    });
    hammerGamebox2.on("tap",function(){
        var color1 = $(hammerGamebox2.element).css("backgroundColor");
        console.log(color1);
        console.log(MycolorAry[3]);
        if(color1==MycolorAry[3]){
            gameNum = true;
        }else{
            gameNum = false;
            console.log("选择错误,游戏结束！");
            clearInterval(setIn);
            $(".alertbox").show();
        }
    });
    hammerGamebox3.on("tap",function(){
        var color1 = $(hammerGamebox3.element).css("backgroundColor");
        console.log(color1);
        console.log(MycolorAry[3]);
        if(color1==MycolorAry[3]){
            gameNum = true;
        }else{
            gameNum = false;
            console.log("选择错误,游戏结束！");
            clearInterval(setIn);
            $(".alertbox").show();
        }
    });


    function gamestart(canvasdom){
        var num = -80;
        var gameTime = 200;
        var changenum = 0;


        randomColor();

        function setfun(){
            console.log("@@@")
            canvasdom.fillStyle = MycolorAry[3];
            setIn = setInterval(function(){
                canvasdom.clearRect(0,0,w,h);
                canvasdom.fillRect(w/2-40,num,80,80);
                num += (20+changenum);
                //盒子超出了最底部的情况
                if(num>h){
                    console.log("游戏结束！");
                    $(".alertbox").show();
                    clearInterval(setIn);

                }else{
                    console.log(gameNum);
                    if(gameNum){
                        gameNum = false;
                        randomColor();
                        clearInterval(setIn);
                        changenum+=5;
                        gameTime -= 5;
                        console.log(gameTime)
                        num = -80;
                        usernum += 10;
                        $(".usernum>span").text(usernum);

                        setfun();

                        console.log(colorAry);
                    }else{
                        console.log("hheheh")
                    }

                }



                if(gameTime<0||changenum>200){
                    console.log("恭喜通关");
                    $(".alertbox2").show();
                }
            },gameTime);
        }
        setfun();
    }

    function randomColor(){
        //难点 这里需要使用 concat创建一个新的数组 赋值给 cloary
        //目的 是 让每一次的 clonary 都是新的  不能影响 colorAry 的 颜色池！！！！
        var clonary = colorAry.concat();
        for(var i = 0; i< 3 ; i++){
            var rad = Math.floor(Math.random()*(clonary.length));
            MycolorAry[i]=clonary[rad];
            clonary.splice(rad,1);

        }

        var rad2 = Math.floor(Math.random()*3);
        MycolorAry[3]=MycolorAry[rad2];

        GameBox.eq(0).css({"background-color":MycolorAry[2]});
        GameBox[0].style.backgroundColor = MycolorAry[2]
        GameBox.eq(1).css({"background-color":MycolorAry[1]});
        GameBox.eq(2).css({"background-color":MycolorAry[0]});
    }



});
</script>
</body>
</html>